import Vue from "vue";
import "./showMsg.css";

const MessageBox = {
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  render() {
    return (
      <div class="modal">
        <div class="box">
          <div class="text">{this.msg}</div>
          <button onClick={this.handleClick}>确定</button>
        </div>
      </div>
    );
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};

function showMsg(msg, clickHandler) {
  const div = document.createElement("div");
  document.body.appendChild(div);

  const vm = new Vue({
    render() {
      return <MessageBox msg={msg} on-click={this.handleConfirm} />;
    },
    methods: {
      handleConfirm() {
        if (clickHandler) {
          clickHandler(() => {
            vm.$destroy();
            document.body.removeChild(vm.$el);
          });
        }
      },
    },
  }).$mount(div);
}

export default showMsg;
